<html>
    <head>
        <title>可复用的过渡</title>
    </head>
    <body>
        <script>
            // 可复用的过渡
                   /*
                        过渡可以通过Vue的组件系统实现复用。
                        要创建一个可复用过渡组件，你需要做的就是将<transition> 或者  <transition-group> 组件作为根组件，然后将任何子组件放置在其中就可以了。
                   */
                        // 使用 template 的简单例子：
                               Vue.component('my-special-transtion',{
                                    template:`
                                        <transition 
                                            name="very-special-transition"
                                            mode="out-in"
                                            v-on:before-enter="beforeEnter"
                                            v-on:after-enter="afterEnter"
                                        >
                                            <slot></slot>
                                        </transtition>
                                    `,
                                    methods: {
                                        beforeEnter:function(el){
                                            // ...
                                        },
                                        afterEnter:function(el){
                                            // ...
                                        }
                                    }
                               })


                        // 函数式组件更适合完成这个任务
                            Vue.component('my-special-transition', {
                                functional: true,
                                render: function (createElement, context) {
                                    var data = {
                                        props: {
                                            name: 'very-special-transition',
                                            mode: 'out-in'
                                        },
                                        on: {
                                            beforeEnter: function (el) {
                                                // ...
                                            },
                                            afterEnter: function (el) {
                                                // ...
                                            }
                                        }
                                    }
                                    return createElement('transition', data, context.children);
                                }
                            })

                        
        </script>
    </body>
</html>